import React, { useState, useEffect } from 'react';
import styles from './index.less';
import { Button, Input, Table, Select, Modal, message, Form } from 'antd';
import CardCommon from '@/compontents/cardCommon';
import lhTool from 'lh-tool';
import api from '@/http/api';
import { PlusOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
import md5 from 'md5';

const { uSchoolList, uSchoolAdd, uSchoolDelete, uSchoolUpdate } = api;
const { Option } = Select;
const { confirm } = Modal;

export default (props: any) => {
  // 表格
  const [list, setList] = useState([]);
  const [pageNo, setPageNo] = useState(1);
  const [pageSize, setPageSize] = useState(10);
  const [total, setTotal] = useState(0);
  // 新增编辑弹框
  const [showAdd, setShowAdd] = useState(false);
  // 是否新增
  const [isAdd, setIsAdd] = useState(true);
  const [initData, setInitData]: any = useState({});
  // 表单样式
  const layout = {
    labelCol: { span: 4 },
    wrapperCol: { span: 16 },
  };
  const tailLayout = {
    wrapperCol: { offset: 17, span: 16 },
  };
  const columns: any = [
    {
      title: '序号',
      dataIndex: 'index',
      key: 'index',
      align: 'center',
      width: 100,
      render: (text: any, record: any, index: any) => `${index + 1}`,
    },
    {
      title: '学校名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '学校ID',
      dataIndex: 'id',
      key: 'id',
    },
    {
      title: '操作',
      dataIndex: 'handle',
      width: 200,
      render: (v1: any, v2: any) => (
        <div>
          <Button
            onClick={() => {
              add(v2);
            }}
            size="small"
            type="primary"
          >
            编辑
          </Button>
          <Button
            disabled
            onClick={() => {
              deleteR(v2);
            }}
            style={{ marginLeft: 10 }}
            size="small"
            danger
            type="primary"
          >
            删除
          </Button>
        </div>
      ),
    },
  ];
  useEffect(() => {
    getList(pageNo, pageSize);
  }, []);
  // 表格列表
  const getList = (pageNo: Number, pageSize: Number) => {
    uSchoolList({
      pageNo,
      pageSize,
    }).then((res: any) => {
      const { list, total } = res.data;
      setList(list);
      setTotal(total);
    });
  };
  // 分页改变
  const pageChange = (pageNo: any, pageSize: any) => {
    setPageNo(pageNo);
    setPageSize(pageSize);
    getList(pageNo, pageSize);
  };
  const handleCancel = () => {
    setShowAdd(false);
  };
  // 点击新增编辑
  const add = (row: any) => {
    const { name } = row;
    setIsAdd(name ? false : true);
    setShowAdd(true);
    if (name) {
      // 编辑
      setInitData(row);
    }
  };
  const onFinish = (v: any) => {
    const { name } = v;
    if (isAdd) {
      uSchoolAdd({
        name,
      }).then(_ => {
        setShowAdd(false);
        getList(pageNo, pageSize);
      });
    } else {
      const { id } = initData;
      uSchoolUpdate({
        name,
        id,
      }).then(_ => {
        setShowAdd(false);
        getList(pageNo, pageSize);
      });
    }
  };
  const deleteR = (row: any) => {
    const { id } = row;
    confirm({
      title: '提示',
      icon: <ExclamationCircleOutlined />,
      content: '确定删除吗？',
      onOk() {
        uSchoolDelete({ id }).then(_ => {
          getList(pageNo, pageSize);
        });
      },
    });
  };
  return (
    <CardCommon>
      <div className={styles.wrap}>
        <div className={styles.tool}>
          <Button
            onClick={() => {
              add({});
            }}
            type="primary"
          >
            新增
          </Button>
        </div>
        <Table
          dataSource={list}
          columns={columns}
          pagination={{
            showQuickJumper: true,
            total,
            size: 'small',
            onChange: pageChange,
            showTotal: () => {
              return `总共 ${total} 条记录`;
            },
          }}
        />
        <Modal
          title={isAdd ? '新增校园入驻' : '编辑校园校园入驻'}
          visible={showAdd}
          onCancel={handleCancel}
          footer={null}
          destroyOnClose
        >
          <Form
            className={styles.form}
            {...layout}
            name="basic"
            initialValues={{ remember: true }}
            onFinish={onFinish}
          >
            <Form.Item
              label="学校名称"
              name="name"
              rules={[{ required: true, message: '请输入学校名称' }]}
              initialValue={isAdd ? '' : initData.name}
            >
              <Input />
            </Form.Item>
            <Form.Item {...tailLayout}>
              <Button type="primary" htmlType="submit">
                提交
              </Button>
            </Form.Item>
          </Form>
        </Modal>
      </div>
    </CardCommon>
  );
};
